<template>
    <div>
        <el-page-header @back="gotoRoute('/')" content="用户管理">
        </el-page-header>
        <el-divider></el-divider>
        <el-button-group>
            <el-button size="mini" type="primary" @click="handEdit">新增</el-button>
        </el-button-group>
        <el-divider></el-divider>
        <el-table :data="tableData.rows" border class="w-80%">
            <el-table-column type="index" label="序号" width="50">
            </el-table-column>
            <el-table-column prop="name" label="名称" width="100">
            </el-table-column>
            <el-table-column prop="user_type" label="账户类型" width="100">
                <template slot-scope="scope">
                    {{ scope.row.user_type > 0 ? "二" : "一" }}级
                </template>
            </el-table-column>
            <el-table-column prop="phone_num" label="简称" width="100">
            </el-table-column>
            <el-table-column prop="group_name" label="所属单位" width="220">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                    <el-button @click="handEdit(scope.row)" type="success" size="small">编辑</el-button>
                    <el-button @click="handRemove(scope.row)" type="danger" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @current-change="handPage" layout="prev, pager, next" :total="tableData.count"
            :page-size="tableData.offset">
        </el-pagination>
    </div>
</template>

<script>
import { FormDialog } from '@formily/element'
import { InputForm } from './InputForm';
import { AdminUserApi } from '../../api/admin-user'
import { sharedConfig } from '../shared/BaseCurd';
import { onFieldValueChange, onFormInit, onFormLoading, onFormMount } from '@formily/core';
import { onFieldInfo } from './../../api/common/field-event'
const api = new AdminUserApi;
const entity = {
    name: "",
    store_pass: null,
    phone_num: "",
    group_id: "",
    group_name: "",
    user_type: 1
}
export default {
    async mounted() {
        this.loadPager({ page: 1 });
    },
    methods: {
        ...sharedConfig.methods,
        async loadPager({ page }) {
            const data = await api.findPager({ page });
            const result = { ...data.data };
            result.rows = result.rows.filter(d => d.name !== "admin");
            this.tableData = result;
        },
        handEdit(row) {
            FormDialog('编辑用户', InputForm)
                .forOpen((payload, next) => {
                    const raw = (row instanceof PointerEvent) ? entity : row;
                    next({
                        initialValues: { ...raw },
                        effects() {
                            onFieldValueChange("group_info", (field, form) => {
                                onFieldInfo({ names: ["group_id", "group_name"], field, form })
                            })
                        }
                    })
                })
                .forConfirm((payload, next) => {
                    next(payload)
                })
                .forCancel((payload, next) => {
                    next(payload)
                })
                .open()
                .then(async (values) => {
                    Reflect.deleteProperty(values, "group_info");
                    if (!(values.store_pass)) {
                        values.store_pass = "1234";
                    }
                    await this._save({ api, values })
                    await this.loadPager({ page: 1 });
                })
                .catch(console.error)
        },
        handRemove(row) {
            this.$confirm("确定要删除?", "系统提示").then(async () => {
                await this._remove({ api, where: { name: row.name } });
                await this.loadPager({ page: 1 });
            }).catch(console.error);

        }
    },

    data() {
        return {
            tableData: {
                count: 0,
                offset: 10,
                page: 1,
                rows: [],
            }
        }
    }
}
</script>